<template>
  <!-- 历史告警记录 -->
  <BaseMainSlot>
    <template v-slot:searchbox>
      <div class="seach-box">
        <div class="select-box-content">
          <div class="select-box-content-name">告警数据类型：</div>
          <el-select v-model="alarmTypeId" clearable @change="search()">
            <el-option
              v-for="(item,index) in alarmTypeList"
              :key="index"
              :label="item.alarmTypeName"
              :value="item.alarmTypeId"
            />
          </el-select>
        </div>
        <div class="select-box-content">
          <div class="select-box-content-name">数据类型：</div>
          <el-select v-model="dataTypeId" clearable @change="search()">
            <el-option
              v-for="(item,index) in dataTypeList"
              :key="index"
              :value="item.dataTypeId"
              :label="item.dataTypeName"
            />
          </el-select>
        </div>
        <div class="select-box-content">
          <div class="select-box-content-name">监测数据项：</div>
          <el-select v-model="dataItemId" clearable @change="search()">
            <el-option
              v-for="(item,index) in dataitemList"
              :key="index"
              :value="item.dataItemId"
              :label="item.originalName"
            />
          </el-select>
        </div>
        <div class="select-box-content">
          <div class="select-box-content-name">日期：</div>
          <el-date-picker
            v-model="seleteDate"
            type="datetimerange"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            @change="queryPageList()"
          />
        </div>
        <div class="operationBtn">
          <div class="screenBtn">
            <div class="btn" @click="changeSelect()">
              <i
                :class="activeName === '' ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'"
                class="arrow-down"
              ></i>
            </div>
          </div>
        </div>
        <el-collapse v-model="activeName" accordion @change="handleChange">
          <el-collapse-item name="1">
            <template slot="title"></template>
            <div class="select-box-content">
              <div class="select-box-content-name">设备名称：</div>
              <div
                class="select-box-content-all"
                @click="cancelSelect('equipmentCode')"
              >全部</div>
              <div
                v-for="(item, index) in equipmentArr"
                :key="index"
                class="select-box-content-list"
                :style="{ color: equipmentCode === item.equipmentCode ? '#54DEE2' : '#C1CFD2' ,fontWeight : equipmentCode === item.equipmentCode ? '600':'400' }"
                @click="selectEquipmentCode(item.equipmentCode)"
              >{{ item.equipmentName }}</div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </template>
    <template v-slot:content>
      <e-table
        ref="tableData"
        rowKey="alarmMessageId"
        :table-data="tableData"
        :table-columns="tableLabel"
        :page="currentPage"
        :size="pageSize"
        :total="totalSize"
        :loading="loading"
        :showSelectColumn="false"
        :table-option="tableOption"
        @sizeChange="changePageSize"
        @pageChange="changeCurrentPage"
        @tableUpdatePlus="mixTableUpdatePlus"
      >
        <template
          v-if="scoped.row.baseAlarmName"
          :style="{'color': scoped.row.disposeStatus === true ? '#5cb87a' : '#f56c6c'} "
          slot-scope="scoped"
          slot="disposeStatus"
        >{{ filtername(scoped.row.disposeStatus) }}</template>
        <template
          slot="operate"
          slot-scope="scoped"
          v-if="scoped.row.alarmMessageId"
        >
          <span class="table-btns-box" @click="getalrmmessage(scoped.row)">
            <i class="el-icon-view"></i>
            <span>查看详情</span>
          </span>
        </template>
      </e-table>
    </template>
  </BaseMainSlot>
</template>
<script>
import nowpagereqs from "@/api/monitoring-alarm/alarm-category-management";
import nowpagereq from "@/api/monitoring-alarm/historical-alarm-record/index";
import alarmNowpagereq from "@/api/monitoring-alarm/alarm-category-management/index";
import BaseMainSlot from "@/components/BaseMainSlot/kong-new.vue";
import { mymixin } from "@/utils/mixin";
import equipScrapRecordApi from "@/api/equip-manage/equip-scrap-record";
export default {
  name: "HistoricalAlarmRecord",
  components: {
    BaseMainSlot,
  },
  mixins: [mymixin],
  data() {
    return {
      isShowEquip: false,
      // 可选择设备
      equipmentArr: [],
      equipmentCode: "",
      // 可选择数据类型
      dataitemList: [],
      dataItemId: "",
      seleteDate: [],
      alarmTypeId: "", //告警类型查询条件
      alarmTypeList: [], //告警类型
      dataTypeId: "", //数据类型查询条件
      dataTypeList: [], //数据类型数组
      tableLabel: [
        {
          param: "batchName",
          label: "设备名称",
          minWidth: "300",
          show: true,
          notSearch: true,
        },
        {
          param: "baseAlarmName",
          label: "告警名称",
          minWidth: "300",
          show: true,
          notSearch: true,
        },
        {
          param: "dataItemName",
          label: "告警数据项",
          minWidth: "150",
          show: true,
          notSearch: true,
        },
        {
          param: "alarmPresetValue",
          label: "预设告警值",
          minWidth: "130",
          show: true,
          notSearch: true,
        },
        {
          param: "actualAlarmValue",
          label: "实际告警值",
          minWidth: "130",
          show: true,
          notSearch: true,
        },
        {
          param: "generateTime",
          label: "发生时间",
          minWidth: "180",
          show: true,
          notSearch: true,
        },
        { param: "dataTypeName", label: "告警数据类型", minWidth: "150" },
        {
          param: "disposeStatus",
          label: "告警信息状态",
          slotName: "disposeStatus",
          minWidth: "150",
          show: true,
          notSearch: true,
        },
        {
          param: "disposeTime",
          label: "处理时间",
          minWidth: "180",
          show: true,
          notSearch: true,
        },
        {
          param: "disposeContent",
          label: "处理意见",
          minWidth: "180",
          show: true,
          notSearch: true,
        },
      ],
      // 表单事件
      tableOption: {
        label: "操作",
        options: [
          {
            label: "操作",
            slotName: "operate",
          },
        ],
      },
      // 选中的数据项数组 employeeId组成 (此数组最多为一个)
      // 可选择所有地块
      alarmTypeList: [],
      nowselectedList: [],
    };
  },
  watch: {},
  created() {},
  mounted() {
    this.queryEquipment();
    this.getselecltlist();
    this.queryPageList();
  },
  methods: {
    changeTableSort(column) {
      this.sortList = column.order
        ? [
            {
              property: column.prop,
              direction: column.order == "ascending" ? "asc" : "desc",
            },
          ]
        : [];
      this.queryPageList();
    },
    // 表格中的标签
    filterTag(value, row) {
      return row.disposeStatus === value;
    },
    // 表格中的标签
    filtername(value) {
      if (value) {
        return "已完成";
      } else {
        return "未完成";
      }
    },
    // 选择
    selectEquipmentCode(id) {
      if (this.equipmentCode === id) {
        this.equipmentCode = "";
      } else {
        this.equipmentCode = id;
      }
      this.queryPageList();
    },
    // 条件查询设备
    queryEquipment() {
      this.equipmentArr = [];
      equipScrapRecordApi.queryEquipment({}).then((res) => {
        if (res.code === 1) {
          let data = res.data || [];
          for (var i in data) {
            this.equipmentArr.push({
              equipmentName: data[i],
              equipmentCode: i,
            });
          }
        }
      });
    },

    // 查看详细数据
    getalrmmessage(e) {
      this.$alert(e.message, "详细数据", {
        showConfirmButton: false,
        closeOnClickModal: true,
        confirmButtonClass: "zh-button-two",
      });
    },
    // 布尔值格式化
    formatBoolean(row, column, cellValue) {
      var ret = ""; // 你想在页面展示的值
      if (cellValue) {
        ret = "已完成"; // 根据自己的需求设定
      } else if (cellValue === false) {
        ret = "未完成";
      }
      return ret;
    },
    // 获取下拉选择数据
    getselecltlist() {
      // 获取所有监测数据项
      nowpagereq.getdataitemlist().then((res) => {
        this.dataitemlist = res.data;
      });
      alarmNowpagereq.getalldatalist().then((res) => {
        this.dataTypeList = res.data;
      });
      let faciparams = {
        organizationList: sessionStorage
          .getItem("organizationList")
          .split(",")
          .concat([sessionStorage.parentId || ""]),
        farmingTypeNo: sessionStorage.getItem("farmingTypeNo"),
      };
      nowpagereqs.querybycondition(faciparams).then((res) => {
        this.alarmTypeList = res.data;
      });
    },
    // 导出
    async download() {
      let params = {
        entity: {
          ...this.entity,
          organizationNo: sessionStorage.getItem("organizationNo"),
          farmingTypeNo: sessionStorage.getItem("farmingTypeNo"),
          system: "SC",
          disposeStatus: true,
        },
      };
      let url = "v3/alarm/alarmMessage/download";
      let excel = "历史告警记录表";
      this.downloadExcel(url, params, excel);
    },
    // 获取当前拥有类型表格
    queryPageList(e) {
      this.loading = true;
      let entity = {
        // result: ''
      };
      if (this.seleteDate) {
        entity.startTime = this.seleteDate[0];
        entity.endTime = this.seleteDate[1];
      }
      if (this.dataTypeId) {
        entity.dataTypeId = this.dataTypeId;
      }
      if (this.dataItemId) {
        entity.dataItemId = this.dataItemId;
      }
      if (this.equipmentCode) {
        entity.batchNo = this.equipmentCode;
      }
      if (this.alarmTypeId) {
        entity.alarmTypeId = this.alarmTypeId;
      }
      if (e) {
        entity = { ...e };
      }
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        entity: entity,
      };
      nowpagereq.getlist(params).then((res) => {
        this.loading = false;
        if (res.code === 0) {
          this.$message.error("当前告警历史表格获取失败");
        }
        let data = res.data.content;
        // 赋值总条数
        this.totalSize = 6; // res.data.totalElements;
        // 赋值数组
        this.tableData = data;
        data.forEach((item) => {
          this.tableData.push(item);
        });
        this.addblankmet();
        this.resetActionBar();
      });
    },
    search(e) {
      this.currentPage = 1;
      this.queryPageList(e);
    },

    handleSelectionChange(list) {
      this.nowselectedList = [];
      this.nowselectedList = list.map((item) => {
        return item.ownUnitId;
      });
      if (this.nowselectedList && this.nowselectedList.length > 0) {
        this.delActive = true;
      } else this.delActive = false;
    },
    delmessage() {
      if (this.nowChanceStau === "del") {
        nowpagereq.dellist(this.nowselectedList).then((res) => {
          if (res.code === 1) {
            this.search();
            this.$message.success("删除成功");
          } else {
            this.$message.error("删除失败");
          }
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-collapse-item__header {
  height: 0px;
}
::v-deep .el-collapse-item__content {
  padding-bottom: 10px;
}
.table-spec {
  margin-top: 10px;
}
</style>
